<template>
	<div class="hotsale">
		<div class="header clearfix">
			<div class="header-left">
				<span class="iconfont left-icon">&#xe6a0;</span>
				<span class="left-title">本周热门榜单</span>
			</div>
			<div class="header-right">
				<span class="right-title">全部榜单</span>
				<span class="iconfont right-icon">&#xe62d;</span>
			</div>
		</div>
		<ul class="list">
			<li class="item" v-for="(item, index) of recommendList" :key = "index">
				<div class="item-tag-wrapper">
					<img class="tag-img" :src="item.tagUrl" />
				</div>
				<div class="item-img-wrapper">
					<img class="item-img" :src="item.imgUrl" />
				</div>
				<div class="item-info">
					<p class="item-title fontsize">{{item.title}}</p>
					<span class="item-price fontsize">{{item.price}}</span>
					<span class="fontsize">起</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	.hotsale
		padding-top: .2rem
		background: #f5f5f5
		.header
			padding: .24rem 0 .24rem .18rem
			background: #fff
			.header-left
				float: left
				font-size: .32rem
				color: #212121
				.left-icon
					float: left
					margin-right: .05rem
					color: #ff7f45
				.left-title
					float: left
					line-height: .42rem
			.header-right
				float: right
				font-size: 0
				color: #676767
				padding-top: .12rem
				.right-icon
					float: right
					margin-right: .3rem
					margin-top: -.08rem
					font-size: .24rem
				.right-title
					font-size: .24rem
					line-height: .3rem
					margin-right: .05rem
		.list
			background: #fff
			padding: 0 .18rem .2rem 0
			height: 3rem
			overflow-x: scroll
			white-space: nowrap
			font-size: 0
			.item
				width: 2rem
				padding: .1rem .06rem 0 .1rem
				position: relative
				display: inline-block
				.item-tag-wrapper
					width: .84rem
					height: .4rem
					position: absolute
					top: .05rem
					z-index: 2
					.tag-img
						width: 100%
				.item-img-wrapper
					height: 2rem
					margin-bottom: .1rem
					.item-img
						width: 100%
				.item-info
					line-height: .36rem
					text-align: center
					font-size: 0
					.fontsize
						font-size: .24rem
					.item-title
						color: #3c3c3c
						ellipsis()
					.item-price
						color: #ff8e26
					.text-other
						color: #696969
</style>
